/**
 * 一起学 mapbox 第四讲  线面
 *
 *  注意：线，面 图层数据格式
 *
 */


const map = window.$myMap
map.on('click', (e) => {
  console.log(e)
})

// 基础线路数据
var lineData = {
  'type': 'FeatureCollection',
  'features': [
    {
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [121.48370205699933, 31.231503492530862],
          [121.48458897364605, 31.230307571631073],
          [121.48564645118626, 31.230074219446493]
        ]
      },
      'properties': {
        lineJoin: 'round',
        lineCap: 'round',
        lineColor: '#ff0000',
        lineWidth: 5,
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [121.48564645118626, 31.230074219446493],
          [121.48541173370899, 31.230751261572053],
          [121.48675883640612, 31.231174943859813]
        ]
      },
      'properties': {
        lineJoin: 'round',
        lineCap: 'round',
        lineColor: '#000',
        lineWidth: 4,
      }
    },
  ]
}

// 3 创建数据源并添加
var lineSource = {
  type: 'geojson',
  data: {
    type: "FeatureCollection",
    features: []
  },
}
map.addSource('lineSource', lineSource)
var line_source = map.getSource('lineSource');
line_source.setData(lineData)


// 4 创建图层并添加
var lineLayer = {
  id: 'lineLayer',
  type: 'line',
  source: 'lineSource',
  // 特殊化定制 https://docs.mapbox.com/style-spec/reference/layers/#line
  'layout': {
    'line-join': ['get', 'lineJoin'],
    'line-cap': ['get', 'lineCap']
  },
  'paint': {
    'line-color': ['get', 'lineColor'],
    'line-width': ['get', 'lineWidth']
  }
}
map.addLayer(lineLayer)

